<template>
	<view class="message-wrap">
		<view class="custom-nav-bar">
			<!-- 页面标题 -->
			<view class="nav-title">消息</view>
		</view>
		<div class="message-type">
			<div class="typeItem" v-for="(item, index) in messageTypeArr" :key="index" @click="toMessageList(item)">
				<view class="unreadNum" v-if="unreadNum && index == 3">{{ unreadNum > 99 ? '99+' : unreadNum }}</view>
				<view class="unreadNum" v-if="unreadNum1 && index == 4">{{ unreadNum1 > 99 ? '99+' : unreadNum1 }}
				</view>
				<image :src="item.src" mode="widthFix"></image>
				<div class="typetext" v-if="index == 3">
					<p>{{ item.title }}</p>
					<span style="display: flex; align-items: center">
						{{ unreadNum ? '您有新消息' : '暂无内容' }}
					</span>
				</div>
				<div class="typetext" v-else-if="index == 4">
					<p>{{ item.title }}</p>
					<span style="display: flex; align-items: center">
						{{ unreadNum1 ? '您有新消息' : '暂无内容' }}
					</span>
				</div>
				<div class="typetext" v-else>
					<p>{{ item.title }}</p>
					<span style="display: flex; align-items: center">
						{{ item.desc }}
						<div class="red" v-if="item.status == 0"></div>
					</span>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import {
	getnew_lists
} from "@/api/gent.js";
export default {
	data() {
		return {
			unreadNum: 0,
			unreadNum1: 0,
			messageTypeArr: [
				// {
				// 	type: '1',
				// 	title:  '咨询消息',
				// 	desc: '暂时还没有新消息',
				// 	src: require('../../static/message/zixun.png')
				// },
				// {
				// 	type: '2',
				// 	title:  '栋长通知',
				// 	desc: '暂时还没有新消息',
				// 	src: require('../../static/message/tongzhi.png')
				// },
				{
					type: "3",
					title: "工单消息",
					desc: "暂时还没有新消息",
					src: require("../../static/message/gongdan.png"),
				},
				{
					type: "4",
					title: "账单消息",
					desc: "暂时还没有新消息",
					src: require("../../static/message/zhangdan.png"),
				},
				{
					type: "5",
					title: "公告消息",
					desc: "暂时还没有新消息",
					src: require("../../static/message/zhangdan.png"),
				},
				{
					type: "6",
					title: "租房消息",
					desc: "",
					src: require("../../static/message/zhangdan.png"),
				}, {
					type: "7",
					title: "用户消息",
					desc: "",
					src: require("../../static/message/zhangdan.png"),
				},
			],
		};
	},
	mounted() {
		this.getlist();

	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			let a = 0
			this.$Api.chat.getUserUnReadNumber().then(res => {
				this.unreadNum = res.data.data
				a = res.data.data
				this.$Api.chat.getUserToUserUnReadNumber().then(res1 => {
					a = a + res1.data.data
					this.unreadNum1 = res1.data.data
					if (a > 0) {
						uni.setTabBarBadge({
							index: 3, // TabBar的索引
							text: a + '' // 显示的数字
						});
					} else {
						uni.removeTabBarBadge({
							index: 3, // TabBar的索引
						});
					}
				})
			})
		}
	},
	methods: {
		getUserUnreadNum() {
			this.$Api.chat.getUserUnReadNumber().then(res => {
				this.unreadNum = res.data.data
				if (res.data.data > 0) {
					uni.setTabBarBadge({
						index: 3, // TabBar的索引
						text: res.data.data + '' // 显示的数字
					});
				} else {
					uni.removeTabBarBadge({
						index: 3, // TabBar的索引
					});
				}
			})
		},
		getUserToUserUnReadNumber() {
			this.$Api.chat.getUserToUserUnReadNumber().then(res => {
				this.unreadNum1 = res.data.data
			})
		},
		async getlist() {
			const res = await getnew_lists();
			if (res.response.statusCode === 200) {
				console.log(res.data.data);
				this.messageTypeArr[0].desc = res.data.data.gongdan.title;
				this.messageTypeArr[1].desc = res.data.data.zhangdan.title;
				this.messageTypeArr[2].desc = res.data.data.notice.title;

				this.messageTypeArr[0].status = res.data.data.gongdan.status;
				this.messageTypeArr[1].status = res.data.data.zhangdan.status;
				this.messageTypeArr[2].status = res.data.data.notice.status;
			}
		},
		toMessageList(item) {
			if (uni.getStorageSync("userInfo")) {
				if (item.type == 6) {
					uni.navigateTo({
						url: "/pages/message/rentMessage",
					});
				} else if (item.type == 7) {
					uni.navigateTo({
						url: "/pages/message/privateMessageList",
					});
				} else {
					uni.navigateTo({
						url: "/pages/message/messageList?type=" + item.type,
					});
				}
			} else {
				uni.showModal({
					title: "",
					content: "请先重新登录",
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/login",
							});
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.message-wrap {
	width: 100%;
	height: 312px;
	background: linear-gradient(171deg, #bdd3f7 0%, #f5f6fa 80%);
}

.red {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background: red;
	margin-left: 10rpx;
	// position: absolute;
	// right: 20rpx;
	// top: 48%;
}

.custom-nav-bar {
	height: 50px;
	/* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding-top: 30px;
}

.nav-back {
	flex: 0 0 auto;
	cursor: pointer;
}

.nav-title {
	flex: 1 1 auto;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 17px;
	color: #000000;
}

.message-type {
	padding-top: 30px;

	.typeItem {
		width: 84%;
		padding: 16px;
		margin: 0px auto 20px auto;
		background: linear-gradient(180deg,
				#f1f6ff 0%,
				rgba(255, 255, 255, 0.9) 100%);
		box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
		border-radius: 16px;
		border: 1px solid #ffffff;
		display: flex;
		align-items: center;
		position: relative;

		.unreadNum {
			position: absolute;
			top: -25rpx;
			right: -25rpx;
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 50%;
			background-color: red;
			color: #ffffff;
			font-size: 22rpx;
		}

		image {
			width: 44px;
			height: 44px;
			margin-right: 12px;
		}

		p {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
		}

		span {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #999999;
		}
	}
}
</style>